iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 3
1
自我挑戰組

VB .net 的自學之路系列 第 3

第三天 CSS的使用

  • 分享至 

  • xImage
  •  

俗話說人要衣裝 佛要金裝
前面講的HTML 目前就像你沒化過妝的女朋友
這時哪好意思帶出門阿
所以今天就來聊聊 HTML的化粧品 CSS
當然
妝畫的好當然就會美如畫
畫不好就像如花 ㄏㄏ

現在先來介紹 CSS 三大寫法

第一式 直接加入樣式(liline)

基本上就是直接定義在原有的Html的標籤內(liline)

語法:
<h1 style="CSS語法">

範例:
<html>
    <body>
        <h2 style="color:red">hello world</h2>
    </body>
</html>

第二式 自訂樣式表(embedding)

宣告在head之間(embedding)

語法: 
<style>CSS樣式設定<style>

範例:
<html>
    <head>
        <style>
            h2 {color:red}
        </style>
    </head>
    <body>
        <h2>Hello world</h2>
    </body>
</html>

第三式 外掛樣式表(Linking)

以外掛方式定義(Linking)
是先定義好標籤樣式,並將之存成副檔名為.css的檔案

在Html的head中加入:

一.
<link rel="stylesheet" href="小瓜.css">
二.
<style>
    @import url('小瓜.css')
</style>

有兩種寫法

再來聊聊 Css選擇器

選擇器簡單來說就是要把東西放在對的位置上
例如:畫妝的時候總不可能用口紅畫眉毛
用眉筆塗嘴唇吧
同理 Css選擇器就是要把樣式放置在我們希望的地方

常用的就二大類
有甚麼我忽略的還請提醒喔

第一類 類別(class)選擇器

我們常常會設置一個類別 來套用至不同標籤

範例:
CSS 部分
.example{color:red;}

HTML 部分
<h1 class="example">hello</h1>
<h2 class="example">world</h2>

第二類 ID選擇器

ID 就有別於 類別
ID物件只能套用一次 而且定義ID時前面要加"#"

範例:
CSS 部分
#example{color:red;}

HTML 部分
<h1 id="example">hello</h1>這時候就只有這個吃的到CSS

<h2 class="example">world</h2>這個就吃不到

那今天的畫妝課就先講到這邊
明天來聊聊JavaScript 簡稱JS 可別跟java弄混了喔(大大我之前就有弄錯過一段時間而不自知XDD

那明天見


上一篇
第二天 HTML架構
下一篇
第四天 淺談javaScript
系列文
VB .net 的自學之路5
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言